<template>
  <div class="vipPay_page" v-if="userDetail">
    <div class="buy_header_box">
      <div class="buy_header">
        <div class="u_info">
          <div class="head_box"><img :src="userDetail.photo" alt=""></div>
          <div class="u_text">
            <strong>{{userDetail.nickName}}</strong>
            <p>( {{userDetail.phone}}登录 )</p>
          </div>
        </div>
        <div class="vip_state">
          <i class="vip_level" :class="'vip'+userDetail.vipLevel"></i>
          <span>{{$levelName(userDetail.vipLevel)}}</span>
          <i class="vip_v" v-if="$levelV(userDetail.vipLevel)">{{$levelV(userDetail.vipLevel)}}{{userDetail.vipLevel == '5' && userDetail.autoVipType!='0'?'(连续包'+(userDetail.vipDuration == '12' ? '年' : userDetail.vipDuration == '3' ? '季' : '月')+')':''}}</i>
          <template v-if="userDetail.autoVipType == '0'">
            <span class="end_time" v-if="userDetail.vipLevel != '0'">{{userDetail.vipEndTime1}}到期</span>
            <span class="end_time" v-else>永久免费</span>
          </template>
        </div>
      </div>
    </div>
    <div class="vipPay_box">
      <!-- vip菜单 -->
      <ul class="vipPay_menu">
        <!-- <li class="vip_level3" :class="{'active':activeLevel == 3}" @click="tabCheckedFn(3)" btn>
          <i class="bg_mask"></i>
          <div class="vm_text">
            <i class="vip_icon"></i>
            <strong>体验版</strong>
            <span>当前</span>            
          </div>
        </li> -->
        <li class="vip_level5" :class="{'active':activeLevel == 5}" @click="tabCheckedFn(5)" btn>
          <div class="level5_box">
            <!-- <i class="bg_mask"></i> -->
            <span class="vip_v">个人版</span>
            <div class="vm_text">
              <i class="vip_icon"></i>
              <strong>SVIP</strong>
              <!-- <span>当前</span> -->
            </div>
          </div>
          <span class="level_sale">限时特惠</span>
        </li>
        <li class="vip_level4" :class="{'active':activeLevel == 4}" @click="tabCheckedFn(4)" btn>
          <i class="bg_mask"></i>
          <span class="vip_v">企业版</span>
          <div class="vm_text">
            <i class="vip_icon"></i>
            <strong>VIP</strong>
            <!-- <span>当前</span> -->
          </div>
        </li>
        <li class="vip_level1" :class="{'active':activeLevel == 1}" @click="tabCheckedFn(1)" btn>
          <i class="bg_mask"></i>
          <span class="vip_v">企业版</span>
          <div class="vm_text">
            <i class="vip_icon"></i>
            <strong>SVIP</strong>
            <!-- <span>当前</span> -->
          </div>
        </li>
        <li class="vip_level2" :class="{'active':activeLevel == 2}" @click="tabCheckedFn(2)" btn>
          <i class="bg_mask"></i>
          <span class="vip_v">企业版</span>
          <div class="vm_text">
            <i class="vip_icon"></i>
            <strong>Plus</strong>
            <!-- <span>当前</span>             -->
          </div>
        </li>
      </ul>
      <div class="vipPay_main">
        <!-- 月份 -->
        <div class="vip_month_box" :class="{'two_m': monthData && monthData.length == 2}">
          <template v-if="monthData">
            <template v-for="item,idx in monthData">
              <div class="vip_month_item" @click="monthCheckedFn(item)" :class="{'active':monthIndex == item.duration,'disabled':!item.status}" :key="'month'+idx" btn>
                <div class="vmb_month">{{item.duration}}个月</div>
                <div class="vmb_price">￥<strong>{{item.payAmount}}</strong></div>
                <div class="vmb_day_price" v-if="activeLevel == 5">{{item.dayPrice}}/天</div>
                <div class="vmb_original_price" v-else>￥{{item.marketPrice}}</div>
                <div class="give_month">{{item.give?'赠送'+item.give:activeLevel == 5?'限时特惠':'紧急试用'}}</div>
                <i class="discounts_icon" v-if="activeLevel == 5 && item.duration == 12">送666大礼包</i>
                <template v-else>
                  <i class="discounts_icon" v-if="item.disCount">限时{{(item.disCount*10).toFixed(1)}}折起</i>
                </template>
              </div>
            </template>
          </template>
        </div>
        <!-- 礼包内容 -->
        <div class="gift_content" v-show="activeLevel == 5 && monthIndex == 12">
          <i class="gc_title">礼包内容</i>
          <p class="gc_item"><span>66元优惠券×1</span>（满198可用，可赠送他人） </p>
          <p class="gc_item"><span>200元优惠券×3</span>（满500元可用，可赠送他人）</p>
          <p class="gc_annotation">注：当前活动仅支持会员级别为SVIP-个人版（含）以下用户参与，最终解释权归掌上精选所有。</p>
        </div>
        <div class="vip_endtime" v-if="activePayObj">有效期至：{{activePayObj.endTime}}</div>
        <!-- 优惠券 -->
        <div class="coupon_box" @click="popCouponBox">
          <div class="ml_left">
            <i class="ml_icon"></i>
            <span>优惠券</span>
          </div>
          <div class="ml_right" v-if="activePayObj && activePayObj">
            <p v-if="checkedCouponObj"><span>-￥{{checkedCouponObj.amount}}</span></p>
            <template v-else>
              <p v-if="!activePayObj.usableCouponCount">暂无可用优惠券</p>
              <p v-else>您有<span>{{activePayObj.usableCouponCount}}张</span>可用优惠券</p>
            </template>
          </div>
        </div>
        <!-- 支付方式选择 -->
        <ul class="pay_type" v-if="!$isWX">
          <li :class="{'active':activePayType == 1}" @click="activePayType=1">
            <div class="ml_left">
                <i class="ml_icon weixin"></i>
                <span>微信</span>
            </div>
            <div class="ml_right">
              <i class="checked_icon"></i>
            </div>
          </li>
          <li :class="{'active':activePayType == 2}" @click="activePayType=2">
            <div class="ml_left">
                <i class="ml_icon zfb"></i>
                <span>支付宝</span>
            </div>
            <div class="ml_right">
              <i class="checked_icon"></i>
            </div>
          </li>
        </ul>
        <!-- 支付按钮 -->
        <div class="pay_btn" btn :class="{'disabled':btnDisabled,'wxPayBtn':$isWX}" @click="goPay">{{btnName}}</div>
        <ul class="more_list">
          <li @click="goPage({path:'/contactQR'})" btn>
            <!-- <router-link :to="{path:'/contactQR'}"> -->
              <div class="li_box">
                <div class="ml_left">
                    <i class="ml_icon contact"></i>
                    <span>联系客服</span>
                </div>
                <div class="ml_right">
                  <i class="arrow"></i>
                </div>
              </div>
            <!-- </router-link> -->
          </li>
          <li @click="goPage({path:'/moreEquity',query:{vLevel:activeLevel}})" btn>
            <!-- <router-link :to="{path:'/moreEquity',query:{vLevel:activeLevel}}"> -->
              <div class="li_box">
                <div class="ml_left">
                    <i class="ml_icon jurisdiction"></i>
                    <span>权益详情</span>
                </div>
                <div class="ml_right">
                  <span>更多权益</span>
                  <i class="arrow"></i>
                </div>
              </div>
            <!-- </router-link> -->
          </li>
        </ul>
      </div>
    </div>
    <div class="vipPay_line"></div>
    <!-- 权益模块 -->
    <ul class="function_list">
      <li>
        <i class="fl_live"></i>
        <h5>直播模块</h5>
        <p>{{activeServeText.live}}</p>
      </li>
      <li>
        <i class="fl_video"></i>
        <h5>短视频模块</h5>
        <p>{{activeServeText.video}}</p>
      </li>
      <li>
        <i class="fl_goods"></i>
        <h5>商品模块</h5>
        <p>{{activeServeText.goods}}</p>
      </li>
      <li>
        <i class="fl_monitor"></i>
        <h5>数据监测</h5>
        <p>{{activeServeText.datas}}</p>
      </li>
      <li>
        <i class="fl_talent"></i>
        <h5>达人模块</h5>
        <p>{{activeServeText.talent}}</p>
      </li>
      <li>
        <i class="fl_analyse"></i>
        <h5>智能分析</h5>
        <p>{{activeServeText.analyse}}</p>
      </li>
    </ul>
    <!-- 会员升级提示 -->
    <van-dialog v-model="isShowUpDialog" :showConfirmButton="false" :class="'up_dialog'">
      <div class="up_dialog_content">
        <h5>温馨提示</h5>
        <div class="up_dialog_msg">
          <p v-if="userVipInfo">您当前会员级别为：<strong>{{vipLevelName(userVipInfo.vipLevel)}}{{renewInit(userVipInfo)}}</strong></p>
          <p>您将要开通：<strong>{{vipLevelName(activeLevel)}}</strong></p>
        </div>
        <div class="up_dialog_btns">
          <button @click="isShowUpDialog=false">取 消</button>
          <button class="active" @click="upConfirmFn">确 定</button>
        </div>
      </div>
      <p class="up_annotation">注：开通后当前级别仍在生效中，级别高的会员将优先使用</p>
    </van-dialog>
    <!-- 优惠券列表弹框 -->
    <van-popup v-model="isShowCouponPop" round position="bottom" :class="'couponPopbox'" >
      <template v-if="couponListData && couponListData.length">
        <ul ref="listBox">
          <template v-for="couponItem in couponListData">
            <li class="coupon_item_p" :class="couponItem.status==1?'disabled':''" :key="couponItem.id+'cardList'" @click="checkedCouponFn(couponItem)">
              <div class="ci_amount">
                <span class="ci_symbol">￥</span>
                <span class="ci_num">{{couponItem.amount}}</span>
                <span class="ci_text">满{{couponItem.enough}}元可用</span>
              </div>
              <span class="ci_title">满减券</span>
              <i class="ci_check" :class="{'checked':couponItem.isChecked}"></i>
            </li>
          </template>
        </ul>
        <div class="coupon_btns">
          <button @click="isShowCouponPop = false">确定</button>
        </div>
      </template>
      <div class="coupon_nodata" v-if="isCouponNoData">
        <div class="img_box"><img src="@/assets/img/nodata.png" alt=""></div>
        <p>您暂时没有优惠券哦~</p>
      </div>
    </van-popup>
    <!-- 不可参与666礼包活动弹框提示 -->
    <van-dialog v-model="isShowHintDialog" :showConfirmButton="false" :class="'hint_dialog'">
      <h3>温馨提示</h3>
      <p>该活动仅支持会员级别为<br />SVIP-个人版（含）以下用户参与</p>
      <div class="hint_btns"><button @click="isShowHintDialog = false">确定</button></div>
    </van-dialog>
  </div>
</template>
<script>
// import { wexinPay } from '@/common/wxjssdk_toolkit';
import serveTextObj from "./serveText"
export default {
  props: {},
  data() {
    return {
      activePayType: 1, //支付方式 - 1:微信，2支付宝
      activeLevel: 5,  //当前选中的vip等级
      userDetail: null, //用户信息
      cancelRequest: null, //清除上一次请求
      monthData: null, //月份数据list
      activePayObj: null, //最终支付状态数据
      monthIndex: 12, //月份选择（默认12个月）
      userLevel:'',  //当前用户等级
      btnName:'',
      btnDisabled:false,  //是否可以去支付
      wxConfig:{
        appId:'wx3f218079525514d2',
      },
      paySign:'', //签名
      orderDataObj:null,  //接口返回的接口订单数据
      orderId:'', //订单id
      activeServeText:{},
      isShowUpDialog:false,
      userVipInfo:null, //用户续费信息
      isShowCouponPop:false, //是否弹出优惠券弹框
      isShowHintDialog:false,  //  是否展示无法参加666大礼包活动提示弹框
      couponListData:null,  //优惠券列表数据
      isCouponNoData:false, //是否有优惠券列表数据
      checkedCouponObj:null,  //选中的优惠券对象
    };
  },
  created() {
    let queryLevel = this.$route.query.vLevel;
    if(queryLevel && Number(queryLevel)){
      if(queryLevel == this.activeLevel){  //解决 从权益页面SVIP个人版过来接口不刷新问题
        this.getMonthData();
      }else{
        this.activeLevel = queryLevel;
      }
    }else{
      let vipLevel = localStorage.getItem('vipLevel');
      let currentIndex = this.initVipLevel(vipLevel);
      let svipIndex = this.initVipLevel(5);
      if(currentIndex <= svipIndex){
        this.activeLevel = 5;
      }else{
        this.activeLevel = vipLevel;
      }
      // if(vipLevel != '0' && vipLevel != '3'){
      //   this.activeLevel = vipLevel;
      // }
      this.getMonthData();
    }
    this.activeServeText = serveTextObj['vip'+this.activeLevel];
  },
  mounted() {
    this.getUserInfo();
    if(this.$route.params.sourceBanner && this.initVipLevel(this.userLevel) > 2){ //  是否有权限参与666大礼包活动
      this.isShowHintDialog = true;
    }
  },
  methods: {
    popCouponBox(){ //  弹出优惠券列表
      if(this.btnDisabled) return;  //如果不满足支付条件则点击无效

      this.isShowCouponPop = true;
      this.$axios.get("/api/pay/GetUsableCoupon",{
        params:{
          VipType: this.activeLevel,
          duration: this.monthIndex
        }
      }).then(res => {
        if(res.data.code == '0'){
          let listData = res.data.data;
          if(listData && listData.length){
            listData.forEach((item)=>{
              if(this.checkedCouponObj && this.checkedCouponObj.id == item.id){  //再次点击弹框，保留之前选中状态,并且是可用的状态
                if(item.status){  //如果优惠券不可用则不选中
                  item.isChecked = false;
                  this.checkedCouponObj = null; //将选中对象置空
                }else{
                  item.isChecked = true;
                }
              }else{
                item.isChecked = false;
              }
            });
            this.couponListData = listData;
            this.$nextTick(()=>{
              console.log(this.$refs.listBox);
              this.$refs.listBox.scrollTop = 0; // 滚动条置顶
            });
          }else{
            this.isCouponNoData = true;
          }
        }
      });
      
    },
    // 选择优惠券
    checkedCouponFn(couponItem){
      if(!couponItem.status){
        this.couponListData.forEach((item)=>{
          if(couponItem.id == item.id){
            couponItem.isChecked = !couponItem.isChecked;
          }else{
            item.isChecked = false;
          }
        });
        if(couponItem.isChecked){ //如果当前项是选中状态，则赋值给接口对象
          this.checkedCouponObj = couponItem;
        }else{
          this.checkedCouponObj = null;
        }
      }
    },
    goPage(pms){
      this.$router.push(pms);
    },
    upConfirmFn(){  //升级确认弹框点击确认
      this.pays();
    },
    goPay(){  //点击支付按钮
      if(!this.btnDisabled){ //不置灰，则可以去支付
        let uLevel = this.initVipLevel(this.userLevel);
        let cLevel = this.initVipLevel(this.activeLevel);
        if(cLevel > uLevel && this.userLevel != '0'){  //如果是升级会员的情况（免费版开通会员不弹出）
          // this.isShowUpDialog = true;
          this.getRenewal();
        }else{
          this.pays();
        }
      }
    },
    getRenewal() {
      this.$axios.get("/api/pay/GetAutoRenewInfo").then(res => {
        if(res.data.code == '0'){
          this.userVipInfo = res.data.data;
          this.isShowUpDialog = true;
        }
      });
    },
    pays(){ //支付函数
      if(this.$isWX){ //微信端内支付
        this.wxJSAPIPay();
      }else{  //微信端外支付 （调用微信h5支付+支付宝支付）
        if(this.activePayType == 1){  //微信h5支付
          this.wxH5Pay();
        }else{  //支付宝支付
          this.zfbPay();
        }
      }
    },
    zfbPay(){ //支付宝支付
      if (!this.activePayObj) return;
      let vipName = this.vipLevelName(this.activeLevel);
      let vipTitle = '抖音数据平台会员付费-' + vipName;
      let zfbPayPms = {
        OrderName: vipTitle,
        Duration: this.activePayObj.duration,
        VipType: this.activeLevel,
        MarketPrice: this.activePayObj.marketPrice,
        RatePrice: this.activePayObj.ratePrice,
        PayAmount: this.activePayObj.payAmount,
        // ReturnUrl: 'https://dy.zsjx114.com' + this.$route.path,
        ReturnUrl: location.origin + '/user',
        TradeType: 'MWEB',  //微信支付方式  	NATIVE：手机扫码支付 JSAPI：公众号支付 APP：app支付 MWEB：H5支付
        CouponId: this.checkedCouponObj ? this.checkedCouponObj.id : 0,  //优惠券id
      }
      this.$axios
        .post('/api/pay/PayWapRequest', zfbPayPms)
        .then(res => {
          if (res.data.code == 0) {
            this.orderId = res.data.data.orderId;
            location.href = res.data.data.url;
          }else{
            this.$toast(res.data.msg);
          }
        });
    },
    // 微信端内JSAPI支付
    wxJSAPIPay() {
      if (!this.activePayObj) return;
      let vipName = this.vipLevelName(this.activeLevel);
      let vipTitle = '抖音数据平台会员付费-' + vipName;
      let payPms = {
        OrderName: vipTitle,
        Duration: this.activePayObj.duration,
        VipType: this.activeLevel,
        MarketPrice: this.activePayObj.marketPrice,
        RatePrice: this.activePayObj.ratePrice,
        PayAmount: this.activePayObj.payAmount,
        ReturnUrl: location.origin + '/user',
        TradeType: 'JSAPI',  //微信支付方式  	NATIVE：手机扫码支付 JSAPI：公众号支付 APP：app支付 MWEB：H5支付
        CouponId: this.checkedCouponObj ? this.checkedCouponObj.id : 0,  //优惠券id
      }
      this.$axios
        .post('/api/pay/WXPayRequest', payPms)
        .then(res => {
          if (res.data.code == 0) {
            this.orderDataObj = res.data.data;
            this.orderId = res.data.data.orderId;
            this.wxJSAPI(res.data.data);
          }else{
            this.$toast(res.data.msg+'('+res.data.code+')');
          }
        });
    },
    // 微信端外H5支付
    wxH5Pay() {
      if (!this.activePayObj) return;
      let vipName = this.vipLevelName(this.activeLevel);
      let vipTitle = '抖音数据平台会员付费-' + vipName;
      let payPms = {
        OrderName: vipTitle,
        Duration: this.activePayObj.duration,
        VipType: this.activeLevel,
        MarketPrice: this.activePayObj.marketPrice,
        RatePrice: this.activePayObj.ratePrice,
        PayAmount: this.activePayObj.payAmount,
        ReturnUrl: location.origin + '/user',
        TradeType: 'MWEB',  //微信支付方式  	NATIVE：手机扫码支付 JSAPI：公众号支付 APP：app支付 MWEB：H5支付
        CouponId:this.checkedCouponObj ? this.checkedCouponObj.id : 0,  //优惠券id
      }
      this.$axios
        .post('/api/pay/WXPayRequest', payPms)
        .then(res => {
          // console.log(res.data.data.url);
          if (res.data.code == 0) {
            this.orderId = res.data.data.orderId;
            location.href = res.data.data.url,'target';
          }else{
            this.$toast(res.data.msg);
          }
        });
    },
    payResultFn(){
      this.$dialog.confirm({
        title: '请确认您的支付结果',
        cancelButtonText:'重新支付',
        confirmButtonText:'支付完成',
      }).then(()=>{ // 确认支付成功，查询订单是否完成
        this.queryOrderStatus(this.orderId).then(()=>{
          location.href = location.origin + '/user';
        }).catch(()=>{
          this.$toast('支付未成功，请重新提交订单');
        });;
      }).catch(()=>{  //重新支付
        this.queryOrderStatus(this.orderId).then(()=>{
          this.$toast('该订单已支付成功');
          setTimeout(()=>{
            location.href = location.origin + '/user';
          },300);
        }).catch(()=>{
          this.$toast('支付未成功，请重新支付');
          setTimeout(()=>{
            this.wxJSAPI(this.orderDataObj);
          },300);
          // setTimeout(()=>{
          //   this.wxJSAPI(this.orderDataObj);
          // },200);
        });
      });
    },
    wxJSAPI(data){
      let that = this;
      if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ){
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        }else if (document.attachEvent){
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      }else{
        onBridgeReady();
      }
      function onBridgeReady(){
        let {
          appid,
          timestamp,
          noncestr,
          prepayid,
          sign,
          paySign
        } = data;
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              'debug':true,
              "appId":appid,     //公众号ID，由商户传入     
              "timeStamp":timestamp+'',         //时间戳，自1970年以来的秒数     
              "nonceStr":noncestr, //随机串     
              "package":"prepay_id="+prepayid,     
              "signType":"MD5",         //微信签名方式：     
              "paySign":paySign //微信签名 
            },
            function(res){
              that.payResultFn();
              // if(res.err_msg == "get_brand_wcpay_request:ok" ){
              //   // 使用以上方式判断前端返回,微信团队郑重提示：
              //   //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              // } 
        });
      }
    },
    queryOrderStatus(oid){  //查询订单是否支付完成
      return new Promise((resolve, reject) => {
        this.$axios.get('/api/pay/GetOrderStatus',{
          params:{
            orderid:oid
          }
        })
        .then((res)=>{
          if(res.data.code == '0'){
            if(res.data.data.status == 1){ // 支付成功
              resolve()
            }else{
              reject()
            }
          }
        });
      })
    },
    comparisonVip(){
      let uLevel = this.initVipLevel(this.userLevel);
      this.btnDisabled = false;
      if(uLevel !== '' && uLevel){
        let cLevel = this.initVipLevel(this.activeLevel);
        if(cLevel == uLevel){
          if(this.userLevel == '5' && this.userDetail.autoVipType != '0'){
            this.btnName = '您已是自动续费会员';
            this.btnDisabled = true;
          }else{
            this.btnName = '立即续费';
            this.btnDisabled = false;
          }
        }else if(cLevel > uLevel){
          this.btnName = '立即升级';
        }else{
          this.btnName = '您已是'+this.vipLevelName(this.userLevel);
          this.btnDisabled = true;
        }
      }else{  //免费版
        this.btnName = '立即开通';
      }
    },
    // 选择开通月份
    monthCheckedFn(itemObj) {
      if (itemObj.status && this.activePayObj != itemObj) { //避免重复赋值
        this.monthIndex = itemObj.duration;
        this.activePayObj = itemObj;
        this.checkedCouponObj = null;
      }
    },
    getUserInfo(){  //获取用户登录信息
      let uid = localStorage.getItem('user_id');
      if(uid){
        this.userDetail = {
          userId : uid,
          nickName : localStorage.getItem('nickName'),
          vipLevel : localStorage.getItem('vipLevel'),
          photo : localStorage.getItem('photo'),
          phone : localStorage.getItem('phone'),
          autoVipType : localStorage.getItem('autoVipType'),
          vipDuration : localStorage.getItem('vipDuration'),
        }
        this.userLevel = this.userDetail.vipLevel;
        this.comparisonVip();

        if(this.userDetail.vipLevel == 0){
          this.userDetail.vipEndTime1 = '免费版';
        }else{
          this.userDetail.vipEndTime1 = localStorage.getItem('vipEndTime1').split(' ')[0];
        }
      }
    },
    getMonthData(vipNum) {//获取月份数据
      let that = this;
      this.$axios(
        {
          method: 'get',
          url: 'api/pay/GetVipPrice',
          params: {
            VipType: vipNum ? vipNum : this.activeLevel,
            // VipData: this.value01,
          }
        },
        {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancelRequest) that.cancelRequest();
            that.cancelRequest = c;
          })
        }).then(res => {
          if (res && res.data && res.data.code == 0) {
            this.monthData = res.data.data;
            this.activePayObj = null;
            this.monthData.forEach(item => {
              if (this.monthIndex == item.duration && item.status) {
                //获取当前选中月份的支付结果
                this.activePayObj = item;
              }
            });
            this.comparisonVip();
          }
        });
    },    
    tabCheckedFn(level){
      this.monthIndex = 12;
      this.activeLevel = level;
      this.activeServeText = serveTextObj['vip'+this.activeLevel];
    },
    initVipLevel(level){
      let aLevel = '';
      if(level == 3){
        aLevel = 0;
      }else if(level == 4){
        aLevel = 1;
      }else if(level == 5){
        aLevel = 2;
      }else if(level == 1){
        aLevel = 3;
      }else if(level == 2){
        aLevel = 4;
      }
      return aLevel;
    },
    vipLevelName(level){
      let name = '';
      if(level == 3){
        name = '体验版';
      }else if(level == 4){
        name = 'VIP-企业版';
      }else if(level == 1){
        name = 'SVIP-企业版';
      }else if(level == 2){
        name = 'Plus-企业版';
      }else if(level == 5){
        name = 'SVIP-个人版';
      }else{
         name = '免费版用户';
      }
      return name;
    },
    renewInit(dataObj){ //自定订阅相关判断展示
      if(dataObj.status == 1 && dataObj.vipType == dataObj.vipLevel){
        // status == 1说明存在自动续费会员等级（当前续费等级不一定是当前会员等级，必须加上 当前会员级别==自动续费会员等级），
        let dateStr = '';
        if(dataObj.duration == 1){
          dateStr = '月';
        }else if(dataObj.duration == 3){
          dateStr = '季';
        }else if(dataObj.duration == 12){
          dateStr = '年';
        }
        return '连续包'+dateStr;
      }
      return '';
    }
  },
  watch: {
    activeLevel(level){
      this.getMonthData(level);
    },
    // userLevel(a){
    //   // console.log(a);
    // }
  }
};
</script>

<style lang='stylus'>
// @import '~@/common/common.styl';
@import '~@/component/vipPop/buyVipPopup.styl';
.vipPay_page{
  background-color #000
  min-height 100vh
}
.vipPay_line{
  height rem(14)
  background-color #efefef
}
.function_list{
  background-color #fff
  display flex
  justify-content space-between
  flex-wrap wrap
  padding rem(50) rem(30)
  li{
    box-sizing border-box
    width rem(335)
    height rem(310)
    padding rem(36) rem(10) 0 rem(30)
    margin-bottom rem(20)
    border-radius rem(10)
    border .0133rem solid #efefef
    overflow hidden
    i{
      display block
      width rem(40)
      height rem(40)
      &.fl_live{
        bgp('./../../assets/img/fl_live.png')
      }
      &.fl_video{
        bgp('./../../assets/img/fl_video.png')
      }
      &.fl_goods{
        bgp('./../../assets/img/fl_goods.png')
      }
      &.fl_monitor{
        bgp('./../../assets/img/fl_monitor.png')
      }
      &.fl_talent{
        bgp('./../../assets/img/fl_talent.png')
      }
      &.fl_analyse{
        bgp('./../../assets/img/fl_analyse.png')
      }
    }
    h5{
      margin-top rem(14)
      font-size rem(30)
      color #222
    }
    p{
      margin-top rem(16)
      font-size rem(26)
      line-height rem(40)
      color #888
      height rem(155)
      overflow-y auto
      -webkit-overflow-scrolling:touch;
    }
  }
}
.buy_header_box{
  padding rem(50) rem(30) rem(60)
  .buy_header{
    height rem(226)
    bgp('./../../assets/img/buy_header_bg.png')
    padding-left rem(40)
    color #fff
    .u_info{
      display flex
      align-items center
      padding rem(24) 0
      border-bottom .0133rem solid rgba(255,255,255,.5)
      .head_box{
        width rem(100)
        height rem(100)
        border-radius rem(100)
        overflow hidden
        font-size: 0
        img{
          width 100%
          height 100%
          object-fit cover
        }
      }
      .u_text{
        padding-left rem(20)
        strong{
          display block
          font-size rem(32)
        }
        p{
          margin-top rem(14)
          font-size rem(24)
        }
      }
    }
    .vip_state{
      display flex
      align-items center
      padding rem(20) 0
      font-size 0
      .vip_level{
        display inline-block
        width rem(30)
        height rem(22)
        margin-right rem(10)
        &.vip0{
          bgp('./../../assets/three/vip0.png')
        }
        &.vip3{
          bgp('./../../assets/three/vip3.png')
        }
        &.vip4{
          bgp('./../../assets/three/vip4.png')
        }
        &.vip1{
          bgp('./../../assets/three/vip1.png')
        }
        &.vip5{
          bgp('./../../assets/three/vip1.png')
        }
        &.vip2{
          bgp('./../../assets/three/vip2.png')
        }
      }
      .vip_v{
        display: inline-block
        line-height: rem(30)
        padding:0 rem(10)
        border: .0133rem solid #fff
        border-radius: rem(15)
        color: #fff
        font-size: rem(18)
        font-style: normal
        margin-left: rem(10)
      }
      span{
        font-size rem(26)
      }
      .end_time{
        margin-left rem(50)
      }
    }
  }
}
.couponPopbox{
  padding: rem(50) rem(30) 0
  height rem(860)
  box-sizing: border-box
  &>ul{
    height: rem(660)
    box-sizing border-box
    overflow-y:auto
  }
  couponItem()
  .coupon_btns{
    position absolute
    bottom 0
    left 0
    width 100%
    height rem(150)
    padding rem(30)
    background-color: #fff
    box-sizing: border-box
    button{
      width 100%
      height 100%
      background-color #ff7500
      border-radius rem(10)
      color #fff
      font-size rem(30)
      border none
    }
  }
  .coupon_nodata{
    box-sizing: border-box
    width: 100%
    height: 100%
    padding-bottom: rem(50)
    display: flex
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center
    .img_box{
      width: rem(300)
      height: rem(240)
      margin: 0 auto
      img{
        width: 100%
      }
    }
    p{
      font-size: rem(26)
      color: #888
    }
  }
}
.hint_dialog{
  width: rem(600)
  padding: rem(54) rem(50) rem(44)
  border-radius rem(16)
  box-sizing border-box
  text-align center
  h3{
    font-size rem(36)
    color #333
  }
  p{
    margin-top rem(42)
    font-size rem(30)
    line-height rem(48)
    color #666
  }
  .hint_btns{
    margin-top rem(52)
    button{
      width rem(230)
      height rem(85)
      border: none
      border-radius rem(10)
      font-size rem(30)
      color #fff;
      background-color: #fd7f2c
    }
  }
}
</style>